<template>
    <div class="order">
        <header>
            <div class="closerank">
                <strong></strong>
                <h3>{{ $t("language.order.title") }}</h3>
                <span @click="$openPage('/My')">
                    <el-icon color="#fff" size="16">
                        <Close />
                    </el-icon>
                </span>
            </div>
        </header>
        <div style="height: 73px"></div>
        <main class="main">
            <h3>{{ parseInt(ordermsg.info.amount) / 100 }}{{ $t('language.informcao.money') }}</h3>
            <span>{{ $t('language.order.money') }}</span>
            <div class="success">
                <p>{{ $t('language.order.buysuccess') }}</p>
                <p>{{ $t('language.order.successText') }}</p>
            </div>
            <div class="pay">
                <span>{{ $t('language.order.paytype') }}: {{ ordermsg.info.payMode == 0 ? 'BRL' : 'USDT' }}</span>
                <div  @click="copyToClipboard(ordermsg.info.orderID)">
                    <span >{{ $t('language.order.orderID') }}: {{ ordermsg.info.orderID }}</span>
                    <!-- @click="copyToClipboard(ordermsg.info.orderID, proxy)" -->
                    <i >{{ $t('language.order.copytext') }}</i>
                </div>
            </div>
            <p>{{ $t('language.order.question') }}<span @click="$openPage('/kefu')">{{ $t('language.order.kefu')
                    }}</span>{{
                    $t('language.order.solve')
                }}</p>
            <div class="btns">
                <el-button class="left" @click="$openPage('/rechange', { index: 0 })">{{
                    $t("language.order.continue")
                }}</el-button>
                <el-button class="right"
                    @click="$openPage('/rechange', { index: 1, orderID: ordermsg.info.orderID })">{{
                    $t("language.order.lookrecord")
                }}</el-button>
            </div>

        </main>
    </div>
</template>
<script setup lang="ts">

import { computed, ref, reactive, nextTick } from "vue";
import { Close } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const store = useStore()
let paymentinfo: any = computed(() => store.orderinfo)
let info: any = computed(() => store.userinfo)

// 复制
let copyToClipboard = (text: string | number | null | undefined) => {
  let tmpTextField: any = document.createElement("textarea");
  tmpTextField.textContent = text;
  tmpTextField.setAttribute("style", "position:absolute; right:200%;");
  document.body.appendChild(tmpTextField);
  tmpTextField.select();
  tmpTextField.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
  ElMessage({
    message: t("language.commontips.copysuccess"),
    type: "success",
    duration: 1000,
  });
}
// 数据初始化
let ordermsg = reactive({
    info: {
        amount: "",
        orderID: "",
        payMode: 0
    }
})
let initData = async () => {
    // console.log(paymentinfo.value, 'ppppp');
    await nextTick()
    useHttpPOST("/Payment/v1.0/User/Recharge/Detail", { orderId: paymentinfo.value.orderNo }).then(({ data }: { data: any }) => {
        ordermsg.info = { ...data.value.data }
    })

}
initData()

</script>
<style scoped lang="scss">
.order {
    width: 100%;

    header {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        @include flex(row, space-between, center);
        background-color: rgb(36, 39, 43);
        padding: 30px 15px 9px;
        color: #fff;
        height: 73px;

        .closerank {
            width: 100%;
            @include flex(row, space-between, center);
            padding-bottom: 5px;
            border: none;

            strong {
                width: 30px;
                display: block;
            }

            h3 {
                font-size: 18px;
                color: #fff;
                text-align: center;
                flex: 1;
            }

            span {
                display: block;
                width: 28px;
                height: 28px;
                @include flex(row, center, center);
                border: 2px solid #fff;
                border-radius: 16px;
                cursor: pointer;
            }
        }
    }

    .main {
        width: 100%;
        height: calc(100vh - 72px);
        padding: 30px 15px 40px;
        @include flex(column, flex-start, center);
        background-color: rgb(26, 26, 26);

        h3 {
            font-size: 30px;
            color: #fff;
        }

        >span {
            color: #b5bac8;
            font-size: 14px;
        }

        .success {
            width: 100%;
            background-color: rgb(36, 38, 43);
            padding: 20px 0;
            margin: 30px 0;

            p {
                font-size: 16px;
                color: #b5bac8;
                text-align: center;
            }
        }

        >p {
            font-size: 14px;
            color: #b5bac8;
            text-align: center;
            margin-top: 30px;

            span {
                color: #fff;
                font-size: 14px;
            }
        }

        .pay {
            width: 100%;

            span {
                color: #fff;
                font-size: 14px;
            }

            div {
                margin-top: 5px;
                @include flex(row, space-between, center);

                span {
                    font-size: 14px;
                }

                i {
                    color: rgb(5, 120, 92);
                    font-size: 14px;
                    font-style: normal;

                }
            }
        }

        .btns {
            @include flex(row, space-between, center);
            margin-top: 20px;

            .left,
            .right {
                width: 42%;
                height: 38px;

            }

            .right {
                background-color: #0a906c;
                border: 1px solid #0a906c;
                color: #fff;
            }

            .left {
                background-color: transparent;
                color: #0a906c;
                border: 1px solid #0a906c;
            }

        }
    }
}
</style>